<template>
	<div class="container-fluid">
		<div class="container">
			<div class="row">
				<div class="col-md-7">
					<div class="thumbnail" v-if="state.detail">
						<div class="bar-title">
							<div class="title" v-if="state.detail.authorInfo">
								<div class="form-group author">
									<img :src="state.detail.authorInfo.profile" class="avatar" @click="handleUpload">
									<span style="margin-left: 10px;">{{state.detail.authorInfo.username}}</span>
								</div>
							</div>
							<div></div>
						</div>
						<div class="caption">
							<h3>{{state.detail.title}}</h3>
							<div v-html="state.detail.body"></div>
						</div>
					</div>
					<nav>
						<ul class="pager">
							<li>
								<router-link v-if="state.prev&&state.prev._id" :to="'/detail?id='+state.prev._id">
									上一篇
								</router-link>
								<span v-else>没有了</span>
							</li>
							<li>
								<router-link v-if="state.next&&state.next._id" :to="'/detail?id='+state.next._id">
									下一篇
								</router-link>
								<span v-else>没有了</span>
							</li>
						</ul>
					</nav>
					<div>
						<div class="form-group">
							<textarea class="form-control" v-model="state.comment" placeholder="发表您的高见" rows="5" />
						</div>
						<button class="btn btn-success" @click="submitComment">提交</button>
					</div>

					<div class="title-bar">
						<div class="title">
							评论列表
						</div>
					</div>
					<div class="comment-list">
						<ul class="list-group" v-if="state.comments.length>0">
							<li class="list-group-item" v-for="(item,index) in state.comments">
								<h2 v-if="item.authorInfo" class="author">
									<img :src="item.authorInfo.profile" class="avatar">
									<span class="username">{{item.authorInfo.username}}</span>
								</h2>
								<h4 class="list-group-item-heading">{{item.body}}</h4>
								<p class="list-group-item-text">{{item.createdAt}}</p>
							</li>
						</ul>
						<div v-else>
							暂无评论
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		toRefs,
		reactive,
		watch,
		onMounted
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		GetCurrentArticle
	} from '../../api/article';

	import {
		createdComment,
		GetComment
	} from '../../api/comment.js'
	import {
		useUserStore
	} from '../../store/user.js'

	const {userInfo} = useUserStore()


	const route = useRoute()
	const router = useRouter()

	const state = reactive({
		detail: ref({}),
		prev: ref({}),
		next: ref({}),
		comment: ref(''),
		comments: ref([])
	})

	onMounted(() => {
		initArticleDetail()
	})
	watch(() => route.query, (nv, ov) => {
		if (nv) {
			initArticleDetail()

		}
	});

	const initArticleDetail = () => {
		GetCurrentArticle({
				id: route.query.id
			})
			.then(({
				code,
				msg,
				data
			}) => {
				if (code == 200) {
					state.detail = data.article;
					state.prev = data.prev;
					state.next = data.next
					initComment()
				}
			})
	}
	const initComment = () => {
		GetComment({
				page: 1,
				size: 20,
				articleId: state.detail.id
			})
			.then(({
				code,
				msg,
				data
			}) => {
				if (code == 200) {
					state.comments = data.comments
				}
			})
	}
	
	const submitComment = () => {
		if (state.body == '') {
			console.log('内容不能为空')
		}
		createdComment({
				body: state.comment,
				articleId: state.detail.id,
				authorId: userInfo.id
			})
			.then(({
				code,
				msg,
				data
			}) => {
				if (code == 400) {
					router.push({
						path: '/login',
						query: {
							redirect: `/detail?id=${state.detail.id}`
						}
					})
				} else if (code == 200) {
					state.comment = ''
					initComment()
				}
			})
	}
</script>

